<script setup lang="ts">
import * as echarts from 'echarts';
import img from './img.svg';
import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue';

let chart: echarts.ECharts | null = null;
const boxRef = useTemplateRef<HTMLElement>('chartRef');
onMounted(() => {
    initChart();
    updateChart();
});
onBeforeUnmount(() => {
    chart?.dispose();
});
const initChart = () => {
    chart = echarts.init(boxRef.value!);
};
const updateChart = () => {
    const symbolSize = 20;
    const data = [
        [40, -10],
        [-30, -5],
        [-76.5, 20],
        [-63.5, 40],
        [-22.1, 50],
    ];
    const option = {
        title: {
            text: 'Try Dragging these Points',
            left: 'center',
        },
        grid: {
            top: '8%',
            bottom: '15%',
        },
        xAxis: {
            min: -100,
            max: 70,
            type: 'value',
            axisLine: { onZero: false },
        },
        yAxis: {
            min: -30,
            max: 60,
            type: 'value',
            axisLine: { onZero: false },
        },
        dataZoom: [
            {
                type: 'slider',
                // 隐藏上半部分的东西
                moveHandleSize: 0,
                // 关闭交互
                silent: true,
                handleIcon: 'image://' + img,
                handleStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(119,119,119,0.45)',
                },
                borderColor: 'rgba(0,0,0,0)',
                handleSize: '180%',
                bottom: 10,
                backgroundColor: '#F1F5F8',
                height: 14,
                showDetail: false,
                // 两个滑块之间的遮罩的背景色
                fillerColor: 'rgba(132,183,255,0.48)',
                // 滑块的初始位置
                start: 30,
                end: 70,
                // 框选时的框选区样式
                brushStyle: {
                    color: 'rgba(132,183,255,0.48)',
                },
                dataBackground: {
                    lineStyle: {
                        color: '#92bfff',
                        width: 2,
                    },
                    areaStyle: {
                        color: '#549bff',
                    },
                },
                selectedDataBackground: {
                    lineStyle: {
                        color: '#92bfff',
                        width: 2,
                    },
                    areaStyle: {
                        color: '#96bfff',
                    },
                },
            },
        ],
        series: [
            {
                type: 'line',
                symbolSize: symbolSize,
                data: data,
            },
        ],
    };

    chart!.setOption(option);
};
</script>

<template>
    <div ref="chartRef" class="chart" />
</template>

<style scoped lang="scss">
@use '@/style/global.scss' as global;

.chart {
    height: 300px;
    margin: 10px;
}
</style>
